<template lang="pug">
div
  create-modal(
    :show.sync="show",
    :user_id="order.customer.id",
    type="report",
  )
  .ui.grid.divided
    .eight.wide.column
      order-step(
        :order.sync="order",
      )
      .ui.divider
      .ui.form
        .inline.field
          label 用户
          a(v-link="{ name: 'user', params: { id: order.customer.id } }", target="_blank") {{order.customer.name || order.customer.id}}
      address-select.flex_1(
        style="margin: 10px 0 10px 0;",
        :address.sync="order.address",
        :user_id="order.customer.id",
      )
      .ui.form
        .three.fields
          .field
            input(type='text', v-model="order.address.name", placeholder="收货人")
          .field
            input(type='text', v-model="order.address.phone", placeholder="手机号")
        .three.fields
          .field
            input(type='text', v-model="order.address.province", placeholder="省")
          .field
            input(type='text', v-model="order.address.city", placeholder="市")
          .field
            input(type='text', v-model="order.address.district", placeholder="区")
        .field
          input(type='text', v-model="order.address.street", placeholder="街道")
        .inline.fields(v-if="!['验光试戴', '验光'].includes(helper.orderCategory(order.category))")
          label.no-wrap 物流备注
          input(type='text', v-model="order.comment_express", placeholder="物流备注")
        .inline.fields(v-if="!['验光试戴', '验光', '试戴'].includes(helper.orderCategory(order.category))")
          label.no-wrap 发票抬头
          input(type='text', v-model="order.invoice", placeholder="发票抬头")
        .inline.fields(v-if="['shipping'].includes(order.status)")
          label.no-wrap 顺丰单号
          .ui.action.input
            input(type='text', v-model="order.express_number", placeholder="顺丰单号")
            a.ui.button(
              v-if="order.express_number",
              :href="'http://www.kuaidi100.com/?com=shunfeng&nu='+order.express_number",
              target="_blank",
            ) 查看物流
      template(v-if="!['试戴'].includes(helper.orderCategory(order.category))")
        .ui.divider
        .flex.jsb.ac
          report-select.flex_1(
            style="margin-right: 10px;",
            :report.sync="order.report",
            :user_id="order.customer.id",
          )
          obj-single-select(
            v-if="reportSource.category==='pq'",
            placeholder="处方种类",
            :options="helper.recipeTypeArray",
            key="value",
            label="text",
            :value.sync="order.recipe_type",
            type="value",
          )
          a.ui.button(v-link="{ name: 'report', params: { id: order.report ? order.report.id : ''} }", target="_blank") 查看
          .ui.button(@click="createReportFn") 新建
          a.ui.button(v-link="{ name: 'reports', query: { user_id: order.customer.id } }", target="_blank") 全部
        template(v-if="_.get(order, 'report.id') && recipe")
          table.ui.celled.table(v-if="reportSource.category==='pq' && order.recipe_type==='yuanyong'")
            tbody
              tr
                td(rowspan="3") 远用
                  br
                  | 处方
                td &nbsp;
                td 球镜
                td 柱镜
                td 轴位
                td 棱镜
                td 基底
                td 矫正视力
                td 瞳距
              tr
                td.border-left 右眼
                td {{recipe['球镜']['右眼']}}
                td {{recipe['柱镜']['右眼']}}
                td {{recipe['轴位']['右眼']}}
                td {{recipe['棱镜']['右眼']}}
                td {{recipe['基底']['右眼']}}
                td {{recipe['矫正视力']['右眼']}}
                td(rowspan="2") {{recipe['瞳距']}}
              tr
                td.border-left 左眼
                td {{recipe['球镜']['左眼']}}
                td {{recipe['柱镜']['左眼']}}
                td {{recipe['轴位']['左眼']}}
                td {{recipe['棱镜']['左眼']}}
                td {{recipe['基底']['左眼']}}
                td {{recipe['矫正视力']['左眼']}}
          table.ui.celled.table(v-if="reportSource.category==='pq' && order.recipe_type==='fuzhu'")
            tbody
              tr
                td(rowspan="3") 辅助
                  br
                  | 处方
                td &nbsp;
                td 球镜
                td 柱镜
                td 轴位
                td 棱镜
                td 基底
                td 矫正视力
                td 瞳距
              tr
                td.border-left 右眼
                td {{recipe['球镜']['右眼']}}
                td {{recipe['柱镜']['右眼']}}
                td {{recipe['轴位']['右眼']}}
                td {{recipe['棱镜']['右眼']}}
                td {{recipe['基底']['右眼']}}
                td {{recipe['矫正视力']['右眼']}}
                td(rowspan="2") {{recipe['瞳距']}}
              tr
                td.border-left 左眼
                td {{recipe['球镜']['左眼']}}
                td {{recipe['柱镜']['左眼']}}
                td {{recipe['轴位']['左眼']}}
                td {{recipe['棱镜']['左眼']}}
                td {{recipe['基底']['左眼']}}
                td {{recipe['矫正视力']['左眼']}}
          table.ui.celled.table(v-if="reportSource.category!=='pq'")
            thead
              tr
                th &nbsp;
                th 球镜
                th 柱镜
                th 轴位
                th 矫正视力
                th 瞳距
            tbody
              tr
                td 右眼
                td {{recipe['球镜']['右眼']}}
                td {{recipe['柱镜']['右眼']}}
                td {{recipe['轴位']['右眼']}}
                td {{recipe['矫正视力']['右眼']}}
                td(rowspan="2") {{recipe['瞳距']}}
              tr
                td 左眼
                td {{recipe['球镜']['左眼']}}
                td {{recipe['柱镜']['左眼']}}
                td {{recipe['轴位']['左眼']}}
                td {{recipe['矫正视力']['左眼']}}
              tr
                td.no-border-right Add
                td.no-border-left {{recipe['Add']}}
                td.no-border-right 棱镜
                td.no-border-left {{recipe['棱镜']}}
                td.no-border-right 基底
                td.no-border-left {{recipe['基底']}}
        //- template(v-else)
          //- table.ui.compact.celled.table
          //-   thead
          //-     tr
          //-       th
          //-       th 球镜
          //-       th 柱镜
          //-       th 轴位
          //-       th 棱镜
          //-       th 基底
          //-       th 瞳距
          //-   tbody
          //-     tr
          //-       td 右眼
          //-       td -2.25
          //-       td -0.75
          //-       td 170
          //-       td -
          //-       td -
          //-       td.center.aligned(rowspan=2).ui.header 64
          //-     tr
          //-       td 左眼
          //-       td -2.25
          //-       td -0.75
          //-       td 170
          //-       td -
          //-       td -
          //-   tfoot.full-width
          //-     tr
          //-       th(colspan=7) , {{reportSource.category|reportCategory}}
      .ui.divider
      table.ui.very.basic.table
        tbody
          tr(v-for="orderItem in order.order_items", track-by="$index", v-if="!['验光'].includes(helper.orderCategory(order.category))")
            td.collapsing.pointer(@click="removeOrderItem(orderItem, order.order_items)")
              i.remove.icon
            td.inline-title.no-wrap {{orderItem.display_name}}
            td
              template(v-if="!['验光试戴', '验光', '试戴'].includes(helper.orderCategory(order.category))")
                lense-select(
                  :order-item.sync="orderItem",
                )
              template(v-else) &nbsp;
            td.right.aligned(v-if="!['验光试戴', '验光'].includes(helper.orderCategory(order.category))") {{_.toNumber(['试戴'].includes(helper.orderCategory(order.category)) ? 200 : orderItem.sub_product_price) + _.toNumber(orderItem.lens_price)}}
          tr(v-if="!['验光'].includes(helper.orderCategory(order.category))")
            td &nbsp;
            td &nbsp;
            td
              product-search(
                :order-item.sync="newOrderItem",
              )
            td
              .ui.button(@click="addOrderItem") 添加
          tr(v-if="!['验光试戴', '验光'].includes(helper.orderCategory(order.category))")
            td &nbsp;
            td.inline-title 小计
            td &nbsp;
            td.right.aligned {{['试戴'].includes(helper.orderCategory(order.category)) ? order.order_items.length*200 : helper.orderItemsTotal(order.order_items)}}
          tr(v-if="_.has(order, 'coupon.discount')")
            td.pointer(@click="order.coupon = {}")
              i.remove.icon
            td.inline-title 优惠
            td {{order.coupon.name}}
            td.right.aligned -{{order.coupon.discount}}
          tr(v-if="!['验光试戴', '验光'].includes(helper.orderCategory(order.category))")
            td &nbsp;
            td.inline-title 改价
            td &nbsp;
            td.right.aligned
              .ui.input.fluid
                input(v-model="order.delta_price")
          tr(v-if="!['验光试戴', '验光'].includes(helper.orderCategory(order.category))")
            td &nbsp;
            td &nbsp;
            td &nbsp;
            td.right.aligned
              .ui.header 总计: {{(['试戴'].includes(helper.orderCategory(order.category)) ? order.order_items.length*200 : helper.orderItemsTotal(order.order_items)) - (_.has(order, 'coupon.discount') ? order.coupon.discount : 0) + _.toNumber(order.delta_price)}}
    .eight.wide.column
      template(v-if="['验光试戴', '验光'].includes(helper.orderCategory(order.category))")
        h2.ui.header {{order.category | orderCategory}}
        .ui.grid.equal.width
          .column
            date-picker(
              :unix.sync="order.optometrist.scheduled_at",
              placeholder="验光时间",
            )
          .column
            optometrist-select(
              :optometrist.sync="order.optometrist"
            )
        .ui.divider
      template(v-if="!['验光试戴', '验光', '试戴'].includes(helper.orderCategory(order.category))")
        h2.ui.header 回访
        .ui.form
          .field
            textarea(v-model="order.return_visit")
        .ui.divider
      .flex.jsb.ac(v-if="!['验光试戴', '验光', '试戴'].includes(helper.orderCategory(order.category))")
        h2.ui.header.no-margin 售后处理
        .ui.checkbox
          input#aftermarket-processing(type='checkbox', v-model="order.aftermarket.processing")
          label.pointer(for="aftermarket-processing") 售后中
      br
      //- .ui.grid.equal.width
      //-   .column
      //-     date-picker(
      //-       :unix.sync="",
      //-       placeholder="验光时间",
      //-     )
      //-   .column
      //-     optometrist-select(
      //-       :optometrist.sync="",
      //-     )
      br
      .ui.form
        .field
          textarea(v-model="order.aftermarket.record")
      .ui.divider
      h2.ui.header 备注
      .ui.form
        .field
          textarea(v-model="order.comment_admin")
</template>

<script>
import { getReport } from '../../vuex/action'
import imgUpload from '../../modules/upload/img'
import ObjSingleSelect from '../../modules/select/objSingle'
import ArraySingleSelect from '../../modules/select/arraySingle'
import LenseSelect from '../../modules/select/lense'
import OptometristSelect from '../../modules/select/optometrist'
import ReportSelect from '../../modules/select/report'
import AddressSelect from '../../modules/select/address'
import ProductSearch from '../../modules/search/product.vue'
import DatePicker from '../../modules/date'
import CreateModal from '../../modules/modal/create'
import OrderStep from './step'

export default {
  name: 'orderEdit',
  components: {
    ObjSingleSelect,
    ArraySingleSelect,
    LenseSelect,
    imgUpload,
    ProductSearch,
    DatePicker,
    OrderStep,
    OptometristSelect,
    ReportSelect,
    CreateModal,
    AddressSelect,
  },
  props: ['order'],
  vuex: {
    getters: {
      reportSource: ({ report }) => report.report,
    },
    actions: {
      getReport,
    }
  },
  data() {
    return {
      newOrderItem: null,
      show: false,
    }
  },
  computed: {
    recipe() {
      if (this.reportSource.category === 'pq') {
        return _.get(this.reportSource, `content["验光处方"]["${this.helper.recipeType(this.order.recipe_type)}"]`)
      } else {
        return _.get(this.reportSource, 'content["验光处方"]')
      }
    },
  },
  methods: {
    createReportFn() {
      swalConfirm({
        title: '将丢失未保存的订单内容',
        text: '是否继续创建该用户的验光报告?',
      }, (isConfirm) => {
        if (isConfirm) {
          this.show = true
        }
      }, true)
    },
    removeOrderItem(item, items) {
      swalConfirm('确定要删除?', () => {
        items.$remove(item)
      }, true)
    },
    addOrderItem() {
      this.order.order_items.push(this.newOrderItem)
    },
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  watch: {
    'order.report': {
      handler(val, old) {
        if (val && val.id && (!old || val.id !== old.id)) {
          catchError(async() => {
            await this.getReport(val.id)
            if (this.order.report.category !== 'pq') {
              this.order.recipe_type = null
            }
            this.order.report = _.cloneDeep(this.reportSource)
          })
        }
      },
      deep: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
